import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text,Input, ScrollView } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import Gwlist from '../index/gwlist'
import Footer from '../index/footer'
import './mall.scss'

import ban02 from './images/ban02.png'
import dingwei from './images/dingwei.png'
import close from './images/close1.png'
import lbbg from './images/lbbg.png'
import cat01 from './images/pcat01.png'
import cat02 from './images/pcat02.png'
import cat03 from './images/pcat03.png'
import cat04 from './images/pcat04.png'
import cat05 from '../../assets/kedouimg01/pcat04.png'
import cat06 from './images/cat06.png'
import cat07 from './images/cat07.png'
import cat08 from './images/cat08.png'

  export default class Index extends Component {
    constructor(props) {
      super(props)
      this.state = {
        content:{},//活动详情
        shoppic:[],
        adddress:'',//地址
        telephone:'',//店铺电话
        mobile:'',//商家电话
        addressMap:'',//详情
        video:0,
        gglist:[],
        shopname:'',
        adimgindex:0
      } 
    }
    config = {
      navigationBarTitleText: '店铺简介',
    }

  
    componentWillMount () {
      this.getshoppic()
      this.getpicurl()
      this.getgg()
     }


  
    componentDidMount() {}
  
    componentWillUnmount() {}
  
    componentDidShow() {}
  
    componentDidHide() {}
		tel(val){
	  	Taro.showActionSheet({
		  itemList: ['呼叫 '+val],
		  success: function (res) {
		    Taro.makePhoneCall({
			　　phoneNumber: val
			})
		  },
		  fail: function (res) {
		    console.log(res.errMsg)
		  }
		})
    }
		
    getgg() {
	    var shopId = Taro.getStorageSync('shopId')
	    var url = '/advert/papi/v1.9/advert/type/5/' + shopId
	    var _this = this
	    CommonJs.ajaxRequest(url, '', 'GET', function(res) {
	      var arr = res.data
	      if (arr.length == 0) {
	        var obj = {}
	        obj.picUrl = ban02
	        obj.targetType = 2
	        arr[0] = obj
	      }
	      _this.setState({
	        gglist: arr,
	      })
	    })
	  }
    change(e){
	  	var index=e.detail.current;
	  	this.setState({
	      adimgindex:index
	    })
	  }
    getshoppic(){
      var _this = this
      var url = '/shop/papi/v1.9/shops/'+Taro.getStorageSync('shopId')
      CommonJs.ajaxRequest(url, '', 'GET', function(res) {
        
        var arr = res.data
       
        var tapp = []
       
        if(arr.addressMap!= null){
          if(arr.addressMap.indexOf(',')>=0){
            tapp = arr.addressMap.split(',')
          }
          else{
            tapp[0]=arr.addressMap
          }
        }
        Taro.setNavigationBarTitle({title:arr.name})
        _this.setState({

          address: arr.address,
          telephone: arr.telephone,
          mobile: arr.mobile,
          addressMap:tapp,
          shopname:arr.name
        })
   
      })
    }
    getpicurl(){
      var _this = this
      var url = '/advert/papi/v1.9/advert/type/7/'+Taro.getStorageSync('shopId')
      CommonJs.ajaxRequest(url, '', 'GET', function(res) {
        var arr = res.data
        var parr = []
        for(var i=0; i<arr.length;i++){
          parr.push(arr[i].picUrl)
        }
        _this.setState({
          shoppic: parr
        })
        
      })
      
    }
   	openvideo(index){
	  	this.setState({
				video:1,
				swipercur:index
			})
	  }
   	closevide(){
   		this.setState({
				video:0
			})
   	}
    render() {
      const shoplist = this.state.shoppic
      const shopmap = this.state.addressMap
      const gglist = this.state.gglist
      return (
        <View className='page footpage'>
          <View className='mallPage'>
         <View className='focusImg tsfocusImg01'>
				<View className='focusbgimg'>
				  {gglist.map((item, index) => (
						  <Image className="swiper-img" style={index==this.state.adimgindex?'':'display:none'} mode="widthFix" src={item.picUrl}></Image>
		      ))}
				</View>
				<View className='focusCon'>
					<Swiper
					onAnimationFinish={this.change.bind(this)}
					className="swiper-container"
					autoplay>
	         {gglist.map((item, index) => (
					 <SwiperItem onClick={this.gggoto.bind(this,item.targetType,item.targetId)}>
					   <Image className="swiper-img" mode="widthFix" src={item.picUrl}></Image>
					 </SwiperItem>
	         ))}
				  </Swiper>
			  </View>
			  
			  <View className='focusbg'><Image className="img" mode="widthFix" src={lbbg}></Image></View>
			</View>
			
			
				<View className='cat-list' style='padding-top:0;display:none;'>
      <View className='cat-li'>
        <View className='cat-li-img' onClick={this.open.bind(this,'/pages/mall/shop')}>
          <Image className="cat-img" mode="widthFix" src={cat05}></Image>
        </View>
        <Text className="cat-text">店铺简介</Text>
      </View>
				<View className='cat-li' onClick={this.open.bind(this,'/pages/mall/yhqcenter')}>
					<View className='cat-li-img'>
						<Image className="cat-img" mode="widthFix" src={cat02}></Image>
					</View>
					<Text className="cat-text">领优惠券</Text>
				</View>
				<View className='cat-li' onClick={this.open.bind(this,'/pages/card/cardadd')}>
					<View className='cat-li-img'>
						<Image className="cat-img" mode="widthFix" src={cat03}></Image>
					</View>
					<Text className="cat-text">会员折扣</Text>
				</View>
				<View className='cat-li'>
					<View className='cat-li-img' onClick={this.open.bind(this,'/pages/mybill/mybill')}>
						<Image className="cat-img" mode="widthFix" src={cat04}></Image>
					</View>
					<Text className="cat-text">买单收银</Text>
				</View>
				
			</View>
			
			
			
        <View className='notice' style="margin-top:0">
          <View className='notice-d'>
          	<Image className="dw-img" mode="widthFix" src={dingwei}></Image>
          </View>
         	<Text className='notice-lis'>{this.state.address}</Text>
          <Text className='notice-lis' onClick={this.tel.bind(this,this.state.telephone!=null?this.state.telephone:this.state.mobile)}>{this.state.telephone!=null?this.state.telephone:this.state.mobile}</Text>

        </View>
        <View className='index-a'>
          <View className='index-name'>商家相册</View>
          <View className='nodate' style={!shoplist||shoplist.length>0?'display:none':''}>暂无相册</View>
          <ScrollView scrollX style='white-space:nowrap;'>
              {shoplist.map((item,index) => (
                <View className='index-img' onClick={this.openvideo.bind(this,index)}>
                <Image className="index-imgs" mode='widthFix' src={item}></Image>
                </View>
              ))}
          </ScrollView>
          </View>
          <View className='intro-box'>
	          <View className='index-name'>商家介绍</View>
            <View className='nodate' style={!shopmap||shopmap.length>0?'display:none':''}>暂无介绍</View>
            <View>
              {shopmap.map((item,index) => (
                <View className='index-map'>
                <Image className="index-imgs"  mode='widthFix' src={item}></Image>
                </View>
              ))}
          </View>

	        </View>
      </View>
      <Gwlist></Gwlist>
      <Footer porpNav="0"></Footer>
      
      <View className='video-page' style={this.state.video==1?'':'display:none;'}>
        	<View className='video-close' onClick={this.closevide.bind(this)}><Image className="img" mode="widthFix" src={close}></Image></View>
        	<View className='video-num'>{this.state.swipercur+1}/{shoplist.length}</View>
	        <View className='video-con'>
	        	<Swiper className="swiper-container" current={this.state.swipercur} onChange={this.change.bind(this)}>
	        		{shoplist&&shoplist.map((item, index) => (
		          	<SwiperItem className="swiperitem">
		        	   <Image className="swiper-img" mode="widthFix" src={item}></Image>
		        	 </SwiperItem>
		        	 ))} 
		          </Swiper>
	        </View>
	    </View>
      
        </View>
      )
    }
  }